<template>
    <div class="app">
        <header>
            <nav>
                <div class="nav_left">
                    <a href="###">
                        <img :src="src">
                    </a>
                </div>
                <ul>
                    <li  v-on:click="ntxt = 1" :class="[{ntxt: ntxt === 1}]"><a href="###">{{na}}</a></li>
                    <li  v-on:click="ntxt = 2" :class="[{ntxt: ntxt === 2}]"><a href="###">{{nb}}</a></li>
                    <li  v-on:click="ntxt = 3" :class="[{ntxt: ntxt === 3}]"><a href="###">{{nc}}</a></li>
                    <li  v-on:click="ntxt = 4" :class="[{ntxt: ntxt === 4}]"><a href="###">{{nd}}</a></li>
                    <li  v-on:click="ntxt = 5" :class="[{ntxt: ntxt === 5}]"><a href="###">{{ne}}</a></li>
                    <li  v-on:click="ntxt = 6" :class="[{ntxt: ntxt === 6}]"><a href="###">{{nf}}</a></li>
                </ul>
            </nav>
        </header>
        <main v-show="ntxt === 1"><Shou></Shou></main>
        <main v-show="ntxt === 2"><Chan></Chan></main>
        <main v-show="ntxt === 3"><Zhi></Zhi></main>
        <main v-show="ntxt === 4"><Shi></Shi></main>
        <main v-show="ntxt === 5"></main>
        <main v-show="ntxt === 6"><Guan></Guan></main>
        <footer>
            <div class="fot_txt">
                <div class="ftleft">
                    <ul v-for="(item,index) in ftxt" :key="index">
                        <h3>{{item.fa}}</h3>
                        <li v-for="(value,indexb) in item.la" :key="indexb">
                            <a href="###">
                                {{value}}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="ftright">
                    <div class="ftr_txt">
                        <h6>{{ha}}</h6>
                        <span>{{hb}}</span>
                        <a href="###">{{hc}}</a>
                        <p>
                            <img :src="srca">
                            <img :src="srcb">
                        </p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>
<script>
import Chan from '@/homework/Jz/Chan.vue';
import Shou from '@/homework/Jz/Shou.vue';
import Zhi from '@/homework/Jz/Zhi.vue';
import logo from '@/assets/11-27jz5158/logo.png';
import fra from '@/assets/11-27jz5158/fra.jpg';
import frb from '@/assets/11-27jz5158/frb.jpg';
import Shi from '@/homework/Jz/Shi.vue';
import Guan from '@/homework/Jz/Guan.vue';
import News from '@/homework/Jz/News.vue';
export default {
    components:{Chan,Shou,Zhi,Shi,Guan},
    data(){
        return {
            ntxt: 1,
            src:logo,
            na:'首页',
            nb:'产品中心',
            nc:'支持下载',
            nd:'视频中心',
            ne:'新闻中心',
            nf:'关于机知',
            ftxt: [
                { fa:'关于机知',la: ['企业简介','社会文化','专利证明'] },
                { fa:'新闻&咨询',la: ['新闻动态','机智大讲堂','直播内容'] },
                { fa:'技术支持',la: ['帮助中心','常见问题','投诉建议','安全通告'] },
                { fa:'产品中心',la: ['股票自动交易软件','指标大全','会员中心','软件定制'] },
            ],
            ha:'4008-3132-58',
            hb:'周一至周日 9:00-18:30',
            hc:'联系客服',
            srca:fra,
            srcb:frb,
        }
    }
}
</script>
<style lang="scss">
*{
    margin: 0;
    padding: 0;
}
ul,dl,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
main{
    width: 100%;
    height: 100%;
}
header{
    width: 100%;
    height: 70px;
    background: #ffffff;
    nav{
        width: 70%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        .nav_left{
            width: 20%;
            height: 100%;
            a{
                display: block;
                width: 125px;
                height: 47px;
                margin-top: 20px;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
        ul{
            width: 80%;
            height: 100%;
            display: flex;
            flex-direction: row;
            text-align: center;
            li{
                flex: 1;
                height: 100%;
                a{
                    display: block;
                    box-sizing: border-box;
                    padding-top: 20px;
                    width: 100%;
                    height: 100%;
                    line-height: 50px;
                    font-size: 16px;
                    color: #333333;
                    font-weight: 600;
                }
                a:hover{
                    color: #e71919;
                }
            }
            .ntxt{
                a{
                    color: #e71919;
                }
            }
        }
    }
}
main{
    width: 100%;
    height: 100%;
}
footer{
    width: 100%;
    height: 316px;
    padding-bottom: 30px;
    background: #363739;
    .fot_txt{
        width: 70%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        .ftleft{
            flex: 2;
            height: 266px;
            border-right: 2px solid #ffffff;
            margin-top: 50px;
            display: flex;
            flex-direction: row;
            ul{
              flex: 1;
              margin-bottom: 10px;
              h3{
                  width: 100%;
                  height: 26px;
                  line-height: 26px;
                  color: #ffffff;
                  font-size: 24px;
                  font-weight: 500;
                  margin: 20px 0 35px;
              }
              li{
                  width: 100%;
                  height: 35px;
                  line-height: 35px;
                  a{
                      width: 100%;
                      height: 100%;
                      display: block;
                      color: #ffffff;
                      font-size: 14px;
                  }
              } 
            }
        }
        .ftright{
            flex: 1;
            height: 271px;
            margin-top: 50px;
            .ftr_txt{
                width: 83%;
                height: 100%;
                margin-left: 17%;
                text-align: center;
                color: #ffffff;
                overflow: hidden;
                h6{
                    width: 100%;
                    height: 33px;
                    line-height: 33px;
                    font-size: 30px;
                    margin: 10px 0;
                    font-weight: 500;
                }
                span{
                    display: block;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    margin-bottom: 10px;
                    font-size: 14px;
                }
                a{
                    display: block;
                    width: 96%;
                    height: 44px;
                    line-height: 44px;
                    color: #ffffff;
                    font-size: 21px;
                    border: 2px solid #ffffff;
                    border-radius: 5px;
                    background: url("../../assets/11-27jz5158/frc.png")no-repeat;
                    background-position: 20%;
                }
                p{
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    height: 100px;
                    margin-top: 30px;
                    img{
                        display: block;
                        width: 100px;
                        height: 100px;
                    }
                }
            }
        }
    }
}
</style>
